<template>
  <div
    id="app"
    :style="{
      '--theme-color': systemInfo.theme,
      '--theme-color-opacity': systemInfo.theme + '25',
    }"
  >
    <router-view />
    <theme-picker :show="false" />
  </div>
</template>

<script>
import { getTokenDecrypt, removeToken } from "@/utils/auth";
import { getLogout } from "@/api/home";
import { mapGetters } from "vuex";
import ThemePicker from "@/components/ThemePicker";

export default {
  name: "App",
  components: {
    ThemePicker,
  },
  computed: {
    ...mapGetters(["systemInfo"]),
  },
  data() {
    return {
      heartNum: 0,
      timer: null,
    };
  },
  methods: {
    /**
     * 获取系统Logo
     */
    getLogo() {
      this.$store.dispatch("system/setLogo");
    },
    /**
     * 获取系统配置详情
     */
    getSystemInfo() {
      this.$store.dispatch("system/setSystemInfo");
    },
    /**
     * 心跳检验是否退出
     */
    getLogout() {
      this.timer = setInterval(() => {
        if (this.heartNum > 2 || this.systemInfo.isThird) {
          clearInterval(this.timer);
          this.timer = null;
        }
        if (getTokenDecrypt()) {
          getLogout()
            .then((res) => {
              if (res && res.code === 200) {
                this.heartNum = 0;
              } else {
                this.heartNum++;
              }
            })
            .catch(() => this.heartNum++);
        }
      }, 300000);
    },
  },
  created() {
    // this.getLogo();
    // this.getLogout();
    // this.getSystemInfo();
  },
  mounted() {
    window.addEventListener("beforeunload", (e) => {
      window._close_interval_time = new Date().getTime();
    });

    window.addEventListener("unload", () => {
      if (new Date().getTime() - window._close_interval_time > 2) {
        console.log("刷新");
      } else {
        console.log("关闭");
        this.$store.dispatch("clearLoginStatus");
      }
    });

    window.addEventListener("resize", () => {
      this.$store.commit("SET_WINDOW_SIZE", {
        width: document.body.offsetWidth,
        height: document.body.offsetHeight,
      });
    });
  },
};
</script>
<style lang="scss">
// ::-webkit-scrollbar {
//   /*滚动条整体样式*/
//   width: 4px;
//   /*高宽分别对应横竖滚动条的尺寸*/
//   height: 8px;
// }

// ::-webkit-scrollbar-thumb {
//   /*滚动条里面小方块*/
//   border-radius: 10px;
//   box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
// }

// ::-webkit-scrollbar-track {
//   /*滚动条里面轨道*/
//   // box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
//   border-radius: 10px;
// }

// 全局tooltip宽度设置
.el-tooltip__popper {
  max-width: 500px;
}

// 解决 el-form-item 换行问题
.el-form-item {
  min-height: 33px !important;
}

* {
  scrollbar-color: rgba(0, 0, 0, 0.1) transparent;
  scrollbar-width: thin;
}

.btn-color-hover:hover,
.btn-color-hover:focus {
  .iconfont {
    color: var(--theme-color) !important;
  }
}
</style>
